{{#>base title=data.page.form}}

    {{#*inline "pageContent"}}

<div class="row">
<div class="col-md-12">
    <h3 class="page-title">
        {{data.page.form}}
    </h3>

    {{>fixtures/tabs-form form-validation=true}}
</div>
</div>

<div class="row">

<div class="col-md-12 ">

    <div class="portlet box default ">
        <div class="portlet-title">
            <div class="caption">
                表单验证
            </div>
        </div>
        <div class="portlet-body form form-page">
            <form action="#" id="form_sample_1" >
                <div class="form-body">

                    <div class="form-group">
                        <label class="control-label">Name
                        <span class="required">
                            *
                        </span>
                        </label>
                        <div>
                            <input type="text" name="name" data-required="1" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Email
                        <span class="required">
                            *
                        </span>
                        </label>
                        <div>
                            <input name="email" type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">URL
                        <span class="required">
                            *
                        </span>
                        </label>
                        <div>
                            <input name="url" type="text" class="form-control"/>
                            <span class="help-block tip" for="url" >
                                e.g: http://www.demo.com or http://demo.com
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Number
                        <span class="required">
                            *
                        </span>
                        </label>
                        <div>
                            <input name="number" type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Digits
                        <span class="required">
                            *
                        </span>
                        </label>
                        <div>
                            <input name="digits" type="text" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Credit Card
                        <span class="required">
                            *
                        </span>
                        </label>
                        <div>
                            <input name="creditcard" type="text" class="form-control"/>
                            <span class="help-block tip">
                                e.g: 5500 0000 0000 0004
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Occupation&nbsp;&nbsp;</label>
                        <div>
                            <input name="occupation" type="text" class="form-control"/>
                            <span class="help-block tip">
                                optional field
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label">Category
                        <span class="required">
                            *
                        </span>
                        </label>
                        <div>
                            <select class="form-control" name="category" class="select2me">
                                <option value="">Select...</option>
                                <option value="Category 1">Category 1</option>
                                <option value="Category 2">Category 2</option>
                                <option value="Category 3">Category 5</option>
                                <option value="Category 4">Category 4</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn green">Submit</button>
                    <button type="button" class="btn default">Cancel</button>
                </div>
            </form>
        </div>
    </div>


</div>
</div>

<div class="row">

<div class="col-md-12">

    <div class="markdown">
        <h3>Javascript代码</h3>
        <pre><code class="javascript">require('../../plugins/jquery.validate/module');
$p.form("#form_sample_1", {
    validate: {
        rules: {
            name: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            url: {
                required: true,
                url: true
            },
            number: {
                required: true,
                number: true
            },
            digits: {
                required: true,
                digits: true
            },
            creditcard: {
                required: true,
                creditcard: true
            },
            occupation: {
                minlength: 5,
            },
            category: {
                required: true
            }
        },
        //自定义验证
        custom: function (form, data) {
            return true;
        }
    }
});</code></pre>

        <h3>更多实例</h3>
        <a href="http://jqueryvalidation.org/documentation/" target="_blank">http://jqueryvalidation.org/documentation/</a>
    </div>
</div>

</div>
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/form/app", function(app) {
                app.page.validation();
            });
        </script>
    {{/inline}}

{{/base}}
